const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth; //设置画布宽度
canvas.height = canvas.offsetHeight; //设置画布高度

function drawClock() {
  ctx.save(); // 保存画布上下文状态
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.translate(canvas.width / 2, canvas.height / 2); // 改变画布坐标原点
  ctx.scale(0.5, 0.5); //缩放画布
  ctx.rotate(-Math.PI / 2); //将坐标系旋转90度,默认旋转方向是顺时针
  ctx.lineWidth = 8;
  ctx.lineCap = 'round'; //设置线条两端样式
  ctx.fillStyle = '#fff';
  ctx.save(); // 保存画布上下文状态
  // 绘制刻度
  for (let i = 0; i < 12; i++) {
    ctx.beginPath();
    ctx.moveTo(100, 0);
    ctx.lineTo(120, 0);
    ctx.stroke();
    ctx.rotate(Math.PI / 6);
  }
  ctx.restore(); //还原画布上下文状态

  //绘制分钟刻度线
  ctx.save();
  ctx.lineWidth = 5;
  for (let i = 0; i < 60; i++) {
    if (i % 5 !== 0) {
      ctx.beginPath();
      ctx.moveTo(115, 0);
      ctx.lineTo(120, 0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI / 30);
  }
  ctx.restore();

  let time = new Date();
  let hour = time.getHours();
  let minute = time.getMinutes();
  let second = time.getSeconds();
  hour = hour >= 12 ? hour - 12 : hour;
  ctx.save();
  // 绘制时针
  ctx.rotate((Math.PI / 6) * hour + (Math.PI / 360) * minute + (Math.PI / 21600) * second);
  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.moveTo(-20, 0);
  ctx.lineTo(80, 0);
  ctx.stroke();
  ctx.restore();
  // 绘制分针
  ctx.save();
  ctx.rotate((Math.PI / 30) * minute + (Math.PI / 1800) * second);
  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.moveTo(-28, 0);
  ctx.lineTo(112, 0);
  ctx.stroke();
  ctx.restore();
  // 绘制秒针
  ctx.save();
  ctx.rotate((Math.PI / 30) * second);
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 6;
  ctx.moveTo(-30, 0);
  ctx.lineTo(85, 0);
  ctx.stroke();
  ctx.restore();

  // 绘制秒针头的圆
  ctx.save();
  ctx.rotate((Math.PI / 30) * second);
  ctx.beginPath();
  ctx.lineWidth = 6;
  ctx.strokeStyle = 'red';
  ctx.arc(94, 0, 10, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.restore();

  // 绘制中心黑色圆点
  ctx.beginPath();
  ctx.strokeStyle = 'black';
  ctx.arc(0, 0, 5, 0, Math.PI * 2, false);
  ctx.stroke();

  // 绘制中心红色圆点
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 7;
  ctx.arc(0, 0, 7, 0, Math.PI * 2, false);
  ctx.stroke();

  // 绘制表盘
  ctx.beginPath();
  ctx.arc(0, 0, 140, 0, Math.PI * 2, false);
  ctx.lineWidth = 10;
  ctx.strokeStyle = 'rgb(48, 96, 161)';
  ctx.stroke();

  ctx.restore();
  requestAnimationFrame(drawClock);
}

drawClock();
